<template>
  <div class="help">
    <div class="list" @scroll="handleScroll">
      <template v-if="list.length">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="title">
            <div class="title_left">
              <img class="icon" src="@/assets/help.png" alt="" />
              <span class="text">{{ item.cate.title }}</span>
            </div>
            <div class="title_right">
              <div v-if="item.status" class="tips2">已回复</div>
              <div v-else class="tips1">待回复</div>
            </div>
          </div>
          <div class="content">{{ item.title }}</div>
          <div class="times">{{ item.created_at }}</div>
          <div class="line" v-if="item.reply"></div>
          <div class="huifu" v-if="item.reply">
            <div class="label">回复：</div>
            <div class="desc">
              <div class="desc_content" :class="{ collapsed: item.isCollapsed, expanded: !item.isCollapsed }" :ref="`descContent_${index}`">
                {{ item.reply }}
              </div>
              <div class="toggle-btn" v-if="item.showToggleBtn" @click="toggleContent(index)">
                <img :class="{ rotated: !item.isCollapsed }" src="@/assets/xiajiantou.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </template>
      <div class="eity" v-else>没有更多数据了</div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  name: "newHelp",
  data() {
    return {
      list: [], //列表数据
      page: 1, //页数
      total: 0, //总数
    };
  },
  async mounted() {
    //获取数据
    await this.getList();
    //计算是否显示展开/收起按钮
    await this.checkOverflowForAll();
  },
  methods: {
    //获取数据
    async getList() {
      let t = Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      try {
        let res = await this.$api.helps({ page: this.page });
        console.log(res);
        if (res.status_code != 200) {
          Toast(res.message);
          return;
        }
        // 为每个列表项添加展开/收起状态
        res.data.data.forEach((item) => {
          item.isCollapsed = true;
          item.showToggleBtn = false;
        });

        this.list = res.data.data;
        this.total = res.data.total;
        t.clear();
      } catch (e) {
        t.clear();
      }
    },
    //列表滚动到底加载下一页
    handleScroll(e) {
      const scrollTop = e.target.scrollTop;
      const scrollHeight = e.target.scrollHeight;
      const clientHeight = e.target.clientHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        if (this.page < Math.ceil(this.total / 10)) {
          this.page++;
          this.getList();
        } else {
          Toast.success({
            message: "没有更多了",
            duration: 1500,
          });
        }
      }
    },
    //点击行数据展开/收起
    toggleContent(index) {
      this.list[index].isCollapsed = !this.list[index].isCollapsed;
    },

    //计算每项是否显示展开/收起按钮
    checkOverflowForAll() {
      this.list.forEach((item, index) => {
        this.$nextTick(() => {
          const contentEl = this.$refs[`descContent_${index}`] ? this.$refs[`descContent_${index}`][0] : null;
          if (contentEl) {
            const lineHeight = parseInt(window.getComputedStyle(contentEl).lineHeight);
            const maxHeight = lineHeight * 1.1; // 1行的高度
            this.list[index].showToggleBtn = contentEl.scrollHeight > maxHeight;
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.help {
  height: 100vh;
  background-color: #f8f8f8;
  position: relative;
  z-index: 2;

  .list {
    width: 100%;
    height: 100%;
    padding: 0.4rem 0.2667rem;

    .item {
      //   height: 4rem;
      background: #ffffff;
      border-radius: 0.2667rem;
      padding: 0 0.4rem 0.4rem;
      margin-bottom: 0.2667rem;

      .title {
        height: 1.0667rem;
        border-bottom: 1px solid #ebebeb;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title_left {
          .icon {
            width: 0.2933rem;
            height: 0.2667rem;
            margin-right: 0.1333rem;
          }

          .text {
            font-weight: bold;
            font-size: 0.3733rem;
            color: #808080;
          }
        }

        .title_right {
          .tips1 {
            width: 1.12rem;
            height: 0.48rem;
            background: #ffefeb;
            border-radius: 0.1067rem;
            font-weight: 500;
            font-size: 0.32rem;
            color: #e8542c;
            line-height: 0.48rem;
            text-align: center;
          }

          .tips2 {
            width: 1.12rem;
            height: 0.48rem;
            background: #ebf3ff;
            border-radius: 0.1067rem;
            font-weight: 500;
            font-size: 0.32rem;
            color: #5d7c8c;
            line-height: 0.48rem;
            text-align: center;
          }
        }
      }

      .content {
        font-weight: 500;
        font-size: 0.3733rem;
        color: #323232;
        line-height: 0.64rem;
        margin: 0.5333rem 0;
      }

      .times {
        font-weight: 500;
        font-size: 0.3733rem;
        color: #808080;
        line-height: 0.64rem;
      }

      .line {
        margin-top: 0.2667rem;
        height: 1px;
        background: #ebebeb;
        border-radius: 1px;
      }

      .huifu {
        margin-top: 0.4rem;
        .label {
          font-weight: 500;
          font-size: 0.3733rem;
          color: #808080;
          margin-bottom: 0.2667rem;
        }

        .desc {
          display: flex;
          padding: 0.2933rem;
          min-height: 0.9867rem;
          background: #f5f8fa;
          border-radius: 0.2667rem;
          border: 1px solid #dadce0;
          flex-direction: column;
          .desc_content {
            font-weight: 500;
            font-size: 0.3733rem;
            color: #1e1e1e;
            overflow: hidden;
            line-height: 1.5;
            position: relative;
          }

          .desc_content.collapsed {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .desc_content.expanded {
            max-height: none;
          }

          .toggle-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 0.2rem;
          }

          .toggle-btn img {
            width: 0.2667rem;
            height: 0.1733rem;
            transition: transform 0.3s ease;
          }

          .toggle-btn img.rotated {
            transform: rotate(180deg);
          }
        }
      }
    }

    .eity {
      text-align: center;
      font-size: 0.32rem;
      color: #999999;
      padding: 0.2667rem;
    }
  }
}
</style>
